<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" 
      xmlns:th="http://www.thymeleaf.org">
  <head>
    <title>Register</title>
      <style>
          html{
              width: 100%;
              height: 100%;
              font-style: sans-serif;
          }
          body{
              width: 100%;
              height: 100%;
              font-family: 'Open Sans',sans-serif;
              margin: 0;
              background-color: #dfdfdf;
          }
          .register{
              position: absolute;
              top:50%;
              left:50%;
              margin: -500px 0 0 -400px;
              width: 800px;
              height: 1000px;
              background-color: white;
              border-radius: 10px;
              box-shadow: #56536A ;
              border-radius: 10px;
          }
          .Re{
              color: #b09f7a;
              text-shadow:0 0 10px;
              letter-spacing: 1px;
              text-align: center;
              position: absolute;
              top: 7%;
              left: 40%;
          }
          .in{
              width: 500px;
              height: 700px;
              position: absolute;
              top: 48%;
              left: 50%;
              margin-top: -250px;
              margin-left: -250px;
          }
          .lb{
              display: flex;
              flex-wrap: wrap;
              justify-content: space-around;
              width: 475px;
              height: 15px;
              margin-bottom: 10px;
              outline: none;
              padding: 10px;
              font-size: 14px;
              text-shadow:1px 1px 1px;
              border-top: 1px solid #312E3D;
              border-left: 1px solid #312E3D;
              border-right: 1px solid #312E3D;
              border-bottom: 1px solid #56536A;
              border-radius: 4px;
              background-color: #fbfbfb;
          }
          .la{
              color: #959695;
              font-size: 14px;
          }
          .but{
              position: absolute;
              bottom: 5%;
              left:40%;
              width: 100px;
              height: 30px;

              text-align: center;
              line-height: 1px;
              background-color: #fbfbfb;
              border: 1px solid #312E3D;
              color: #656464;
              padding: 9px 14px;
              font-size: 16px;
              box-shadow: #656464;
              line-height: normal;
              border-radius: 15px;
              margin: 0;
          }
      </style>
  </head>

  <body>
    
    <form method="POST" th:action="@{/register}" id="registerForm">
        <div class="register">
                <h1 class="Re">Register</h1>
            <div class="in">
                <label for="username" class="la">Username: </label><br/>
                <input type="text" name="username" class="lb"/><br/>

                <label for="password" class="la">Password: </label><br/>
                 <input type="password" name="password" class="lb"/><br/>

                <label for="confirm" class="la">Confirm password: </label><br/>
                  <input type="password" name="confirm" class="lb"/><br/>

               <label for="fullname" class="la">Full name: </label><br/>
              <input type="text" name="fullname" class="lb"/><br/>

                <label for="userGrade" class="la">UserGrade: </label><br/>
                <input type="text" name="userGrade" class="lb"/><br/>
    
               <label for="userMajor" class="la">UserMajor: </label><br/>
                <input type="text" name="userMajor" class="lb"/><br/>
    
                <label for="userCollege" class="la">UserCollege: </label><br/>
                  <input type="text" name="userCollege" class="lb"/><br/>

              <input type="submit" value="Register" class="but"/>
            </div>
        </div>
    </form>
    
  </body>
</html>